<template>
	<view class="priceBox">
		<view class="activityBox" v-if="false">
			<view class="activityBox_left">
				<view class="priceInfo">
					<image src="../../../../static/images/combination_details_lightning.png"></image>
					<text class="remainingDays">只剩1天</text>
					<priceFormat class="priceFormat" :price="222" weight intSize="50" floatSize="30" labelSize="30"></priceFormat>
					<view class="straightDrop">
						<image src="../../../../static/images/piceTemplatejf_activity.png"></image>
						<text>积分+0.4</text>
					</view>
				</view>
				<view class="priceRests">
					<text class="markDownBox">限时直降28.3元</text>
					<text class="salesVolumeBox">已售7573件</text>
					<text class="repertoryBox">仅剩7573件</text>
				</view>
			</view>
			<view class="activityBox_right">
				<view class="triangle-container"></view>
				<text class="activityTitle">限时秒杀</text>
				<text class="activityTime">
					<text>00</text>
					:
					<text>29</text>
					:
					<text>29</text>
				</text>
			</view>
		</view>
		<view class="selfSupportBox" >
			<view class="selfSupportBox_left">
				<view class="priceInfo">
					<image src="../../../../static/images/piceTemplateSd.png"></image>
					<text class="remainingDays">只剩1天</text>
					<priceFormat class="priceFormat" :price="222" weight intSize="50" floatSize="30" labelSize="30"></priceFormat>
					<view class="straightDrop">
						<image src="../../../../static/images/piceTemplatejf_hd.png"></image>
						<text>积分+0.4</text>
					</view>
				</view>
				<view class="priceRests">
					<text>限时直降28.3元</text>
					<text>已抢57件</text>
					<text>仅剩5890件</text>
				</view>
			</view>
			<view class="selfSupportBox_right">
				<text class="selfSupportTitle">平台自营</text>
				<view class="selfSupportExplain">
					<image src="../../../../static/images/piceTemplateAuthentication.png"></image>
					<text>官方旗舰</text>
				</view>
			</view>
		</view>
		<view class="basicsBox" v-if="false">
			<view class="basicsBox_left">
				<text class="basicsBox_title">拼团价</text>
				<priceFormat class="priceFormat" :price="222.00" weight intSize="50" floatSize="30" labelSize="30"></priceFormat>
				<text class="originalPrice">¥562.00</text>
				<view class="straightDrop">
					<image src="../../../../static/images/piceTemplatejf_basics.png"></image>
					<text>积分+0.4</text>
				</view>
			</view>
			<text class="saleInfo">已抢4000+件</text>
		</view>
	</view>
</template>

<script>
	import priceFormat from '@/components/priceFormat'
	export default {
		components: {priceFormat},
		data(){
			return{
				
			}
		}
	}
</script>

<style  scoped lang="scss">
	@font-face {
	  font-family: 'zhjkh';
	  src: url('../../../../static/fonts/zhjkh.ttf') format('truetype');
	}
	.priceBox{
		width: 100%; 
		height: auto;
		.activityBox{
			width: 100%;
			height: auto;
			.activityBox_left{
				width: 70%;
				height: 80px;
				float: left;
				background-color: #de3a2e;
				.priceInfo{
					width: calc(100% - 20px);
					margin-left: 10px;
					height: 30px;
					float: left;
					margin-top: 10px;
					image{
						width: 20px;
						height: 20px;
						float: left;
						margin-top: 5px;
					}
					.remainingDays{
						width: auto;
						height: 30px;
						line-height: 30px;
						font-size: 18px;
						color: #fff;
						float: left;
					}
					.priceFormat{
						float: left;
						margin-left: 5px;
						color: #fff;
						font-weight: bold;
						line-height: 25px;
					}
					.straightDrop{
						width: auto;
						height: 23px;
						float: left;
						margin-left:8px;
						border-radius: 15px;
						background-color: #fbd5b1;
						margin-top: 1px;
						image{
							width: 19px;
							height: 19px;
							float: left;
							margin-top: 2px;
							margin-left: 3px;
						}
						text{
							font-size: 14px;
							font-weight: 400;
							color: #de3a2e;
							width: auto;
							height: 100%;
							line-height: 23px;
							float: left;
							padding-right: 5px;
							margin-left: 3px;
						}
					}
				}
				.priceRests{
					width: calc(100% - 20px);
					margin-left: 10px;
					height: 30px;
					float: left;
					display: flex;
					.markDownBox{
						width: auto;
						float: left;
						font-size: 13px;
						line-height: 22px;
						height: 22px;
						margin-top: 4px;
						background-color: #fbd5b1;
						color:#de3a2e;
						padding: 0px 5px;
						border-radius: 3px;
					}
					.salesVolumeBox,.repertoryBox{
						width: auto;
						padding: 0px 5px;
						font-size: 13px;
						color: #fff;
						height: 22px;
						line-height: 20px;
						border:1px solid #fff;
						border-radius: 3px;
						float: left;
						margin-left: 5px;
						margin-top: 4px;
					}
				}
			}
			.activityBox_right{
				width: 30%;
				height: 80px;
				float: right;
				background-color: #f6c346;
				.activityTitle{
					font-family: 'zhjkh';
					width: 100%;
					height: 30px;
					font-style: italic;
					text-align: center;
					float: left;
					margin-top: -40px;
					line-height: 30px;
					font-size: 22px;
					color:#8e2c11;
				}
				.activityTime{
					width: 100%;
					height: 25px;
					font-size: 15px;
					color:#fff;
					line-height: 25px;
					text-align: center;
					float: left;
					margin-top: -10px;
					text{
						width: auto;
						padding: 0px 2px;
						height: 20px;
						font-size: 16px;
						background-color: #f2953f;
						margin-right: 2px;
						border-radius: 3px;
						margin-left: 2px;
					}
				}
			}
			.triangle-container {
			  position: relative;
			  width: 10px;
			  height: 20px;
			  margin-top: 30px;
			  margin-left:-9px;
			}
			.triangle-container:before {
			  content: '';
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -50%);
			  border-style: solid;
			  border-width: 10px 10px 10px 0;
			  border-color: transparent #f6c346 transparent transparent;
			}
			
		}
		.selfSupportBox{
			width: 100%;
			height: 80px;
			background:url('../../../../static/images/cb8533be877746f9943d7fa1542fc0f9png.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			.selfSupportBox_left{
				width: 70%;
				height: 80px;
				float: left;
				.priceInfo{
					width: calc(100% - 20px);
					margin-left: 10px;
					height: 30px;
					float: left;
					margin-top: 10px;
					image{
						width: 20px;
						height: 20px;
						float: left;
						margin-top: 5px;
					}
					.remainingDays{
						width: auto;
						height: 30px;
						line-height: 30px;
						font-size: 18px;
						color: #f9e9d0;
						float: left;
					}
					.priceFormat{
						float: left;
						margin-left: 5px;
						color: #f9e9d0;
						font-weight: bold;
						line-height: 25px;
					}
					.straightDrop{
						width: auto;
						height: 23px;
						float: left;
						margin-left:8px;
						border-radius: 15px;
						background-color: #f9e9d0;
						margin-top: 1px;
						image{
							width: 19px;
							height: 19px;
							float: left;
							margin-top: 2px;
							margin-left: 3px;
						}
						text{
							font-size: 14px;
							font-weight: 400;
							color: rgb(43,34,14);
							width: auto;
							height: 100%;
							line-height: 23px;
							float: left;
							padding-right: 5px;
							margin-left: 3px;
						}
					}
				}
				.priceRests{
					width: calc(100% - 20px);
					margin-left: 10px;
					height: 30px;
					float: left;
					display: flex;
					text{
						width: auto;
						padding: 0px 5px;
						font-size: 13px;
						color: #f9e9d0;
						height: 22px;
						line-height: 20px;
						border:1px solid #f9e9d0;
						border-radius: 3px;
						float: left;
						margin-left: 5px;
						margin-top: 4px;
					}
				}
			}
			.selfSupportBox_right{
				width: 30%;
				height: 80px;
				float: right;
				background: url('../../../../static/images/60488ffd27d344dabad52de4bdcb4344.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				.selfSupportTitle{
					font-family: 'zhjkh';
					width: 72%;
					height: 30px;
					margin-top: 13px;
					background-image: linear-gradient(to right,rgb(233,214,201) 0%, rgb(254,248,240) 50%,rgb(248,235,227) 100%);
					background-clip: text;
					text-align: left;
					float: right;
					line-height: 30px;
					font-size: 19.5px;
					color:transparent;
				}
				.selfSupportExplain{
					width: 73%;
					height: 30px;
					float: right;
					image{
						width: 15px;
						height: 15px;
						float: left;
						margin-top: 2px;
						margin-left: 1px;
					}
					text{
						color:rgb(219,204,190);
						width: auto;
						height: 20px;
						line-height: 18px;
						font-size: 15px;
						float: left;
						margin-left: 3px;
					}
				}
			}
		}
		.basicsBox{
			width: 100%;
			height: 45px;
			background-color: #fff;
			padding: 5px 0px;
			.basicsBox_left{
				width: calc(75% - 20px);
				height: 30px;
				float: left;
				margin-left: 10px;
				margin-top: 10px;
				.basicsBox_title{
					width: auto;
					float: left;
					height: 30px;
					line-height: 30px;
					font-size: 16px;
					font-weight: bold;
					color: #dd3d2f;
				}
				.priceFormat{
					float: left;
					margin-left: 5px;
					color: #dd3d2f;
					font-weight: bold;
					line-height: 23px;
				}
				.originalPrice{
					width: auto;
					float: left;
					margin-left: 5px;
					height: 30px;
					line-height: 32px;
					text-decoration: line-through;
					font-size: 25rpx;
					color: #dedede;
				}
				.straightDrop{
					width: auto;
					height: 23px;
					float: left;
					margin-left:8px;
					border-radius: 15px;
					background-color: rgba(66,202,77,0.1);
					margin-top: 2px;
					image{
						width: 19px;
						height: 19px;
						float: left;
						margin-top: 2px;
						margin-left: 3px;
					}
					text{
						font-size: 14px;
						font-weight: 400;
						color: #42ca4d;
						width: auto;
						height: 100%;
						line-height: 23px;
						float: left;
						padding-right: 5px;
						margin-left: 3px;
					}
				}
			}
			.saleInfo{
				width: 25%;
				height: 30px;
				line-height: 30px;
				margin-top: 10px;
				float: right;
				margin-right: 10px;
				font-size: 14px;
				color: #6a6a6a;
				text-align: right;
			}
		}
	}
</style>